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1. Introduction 


To enable all people, including persons with disabilities, to live independently 
and participate in all aspects of life, we should take every opportunity to 
make information accessible to all. 


1.1 Equal Opportunities for Persons with Disabilities 


With the rapid growth of the Internet, ensuring that websites are accessible 
to persons with disabilities is now an essential consideration to enable their 
full integration into society. 


This is also in line with the spirit of the United Nations’ Convention on the 
Rights of Persons with Disabilities, which came into force for the People’s 
Republic of China, including the Hong Kong Special Administrative Region 
(HKSAR), on 31 August 2008. 


1.2 Promoting Web Accessibility for Persons with Disabilities 


Over the years, the HKSAR Government has been actively promoting web 
accessibility to help persons with disabilities access online information and 
services and enhance their user experience. 


Since 1999, the Government has promulgated accessibility guidelines and 
best practices for the design of government websites. The guidelines are also 
available to the public as a reference for making their websites accessible. 
The latest version of the guidelines is available at: 
https://www.webforall.gov.hk 


1.3 Web Accessibility Handbook 


This Handbook is designed for senior executives and managers to better 
understand the importance of web accessibility and show how it can be 
successfully implemented. 
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2. What Is Web Accessibility 


Some organisations may consider their websites to be “accessible” when the 
websites are easily found by search engines. However, the core principle of 
web accessibility is not about whether people “can find you”, it is about 
designing sites for everyone, no matter who they are or how they access the 
Internet. It specifically addresses the needs of persons with disabilities, and 
ensures acceptable ease of use for all levels of ability. 


The question you need to ask is: 


“Can ALL people, including persons with disabilities, access the 
information that your website provides?” 


By adopting relevant guidelines when designing websites to cater for the 
needs of persons with disabilities, you are making your website more user- 
friendly, maximising your customer base and showing that you are an 
organisation that cares. 
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3. Why Websites Need to be Accessible 


There are many reasons why websites need to be accessible. 


3.1 Social Responsibility 


Everyone has a responsibility to treat persons with disabilities the same as 
we treat persons without disabilities. This is especially important for websites, 
as they often enable these people to live a more independent life and 
maximise their potentials in a knowledge society. In some cases a website 
is the only way for persons with disabilities to access up-to-date information. 


3.2 Legal Responsibility 


The Disability Discrimination Ordinance (Cap 487) has created a legal duty 
for organisations to ensure their services are available to everyone 
regardless of disability. This principle is applicable to information and 
services provided through websites. 


3.3 Access to Hidden Markets 


Effective web accessibility allows: 


e Government websites to reach more citizens. 
e Corporate websites to reach and retain more online customers. 


3.4 Rank More Prominently in Search Result 


Adopting web accessibility design is in effect making websites more 
accessible not only to persons with disabilities but also the search engines. 
Many of the features making a website accessible, such as enforcing proper 
coding of the webpages and presenting the contents in a clear and structured 
manner, are inherent characteristics of a search engine friendly website. 
Therefore, the more accessible your website is, the more effective your 
search performance is, and the more potential customers you can reach. 


3.5 Lower Costs 


Attention to web accessibility guidelines on all website projects saves time 
and money in the long term, especially when new releases of systems are 
rolled out. 


Building accessible websites requires good coding techniques that in turn 
lead to websites that are easier to maintain and are compatible with different 
web browsers and devices such as smart phones and tablets. 
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4. Myths About Web Accessibility 


There are many myths with regards to web accessibility. Some of these are 
outlined below and a good understanding of them will help you drive web 
accessibility in your organisation. 


Myth 1: Persons with Disabilities Do Not Use Websites 


Many people assume that persons with disabilities do not use websites. 
In fact the complete opposite is the case. 


Persons with disabilities often use websites more than persons without 
disabilities. Websites have been a great enabler for these people to live a 
more independent life by shopping and socialising online. 


Myth 2: Accessible Websites Are Boring 


Designers are fearful that building an accessible website will lead to a website 
that is boring. This is not necessarily the case. 


Web accessibility relies upon good coding techniques as well as simple design. 


Simple design does not necessarily mean boring design. 


Myth 3: Web Accessibility Is Expensive 


Many people think building an accessible website is expensive and resist this 
process. 


In fact building an accessible website in general can save you money in the 
long term through better programming discipline and good coding techniques. 


These techniques lead to websites that are simpler to maintain and use with 
a range of browsers and devices. 
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5. How Persons with Disabilities Use Websites 


Most people think about visually impaired persons when it comes to 
accessibility, however there are many different types of disabilities and 
hence many different techniques that persons with disabilities can use to 
access websites. 


Disabilities fall into four major categories: 


e This covers persons who are completely or 


Visual lm pairment partially blind, have poor eye-sight, or suffer 
from colour blindness. 


Ph sical e This covers persons who are missing limbs, 
y have reduced control of their limbs, or suffer 
Im pairment from dexterity problems or epilepsy. 
Hea ring e This covers persons who are completely or 
Impairment partially deaf. 
Cognitive e This covers persons who have difficulties in 
Impairment EE 


In addition, there are many others who have temporary disabilities, for 
example, a wounded arm. Such injuries can make accessing websites just 
as difficult as it is for persons with permanent disabilities. 


Examples of disabilities and the ways to overcome the constraints are 
outlined below. 


5.1 Visual Impairment 


In this case people either cannot see at all or have difficulty in seeing a 
computer screen. 


It is critical that websites are designed to work with screen readers and 
screen magnifiers. It is also important that colours are visible to persons with 
colour blindness. 
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5.2 Physical Impairment 


In this case the person generally does not have the ability to access a website 
with a keyboard or a mouse in a normal way. This kind of impairment varies 
from someone who has dexterity problems and finds a mouse difficult to use, 
to someone who is not able to use a mouse or keyboard at all because of 
missing limbs. People with epilepsy may react to flashing images. 


It is important to make buttons large enough for easy clicking, and not to 
place important items too close together, otherwise wrong item might be 
clicked by mistake. 


Additionally, it is important to ensure the website works with assistive 
technologies such as voice control software, which allow a person to access 
a website using voice commands. 


5.3 Hearing Impairment 


With the increase in the usage of videos and audios on the web, it is 
important to consider how this impacts people who cannot hear. If 
information is conveyed in audio format, it is necessary to ensure there is an 
alternative way to access this information. 


This can be as simple as providing a text transcript of the audio content or 


subtitles on the video. A text transcript has an added advantage for persons 
with visual impairment as well. 


5.4 Cognitive and Learning Impairment 


Although it is difficult to define cognitive impairment, it generally refers to 
persons with specific learning difficulties or mental illness. These people have 
greater difficulty in performing mental tasks than average persons. 


Although they do not require any special tools when browsing websites, they 
may find it more difficult than average persons to interpret the content. This 
should be kept in mind when developing contents for websites. 
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6. Top 10 Concerns from Persons with Disabilities 


6.1 Unable to Skip Adobe Flash and Moving Objects 


Affected Group: All Persons with Disabilities 


Website owners should first question the need for Adobe Flash and moving 
objects, which often frustrate all people using websites. 


If deemed essential, coding techniques that allow users to skip past these 
items should be implemented. 


Developers may also adopt cascading style sheet techniques that allow 
important items to be presented first within the code and hence be read first 
by screen readers. 


Ensure users can skip past other blocks such as lengthy navigation bars. 


AAA 


Home About Contact Services Support FAQ 


Have expertise in corporate 
governance? 


> Here’s an opportunity to share your skills 


With the immense populerity of smart phones and increasingly affordable mobile 
data, it’s becoming cheaper and easier for customers to go online with their 
mobiles. 

Of course, you've tested that your website works on a computer screen. But have 
you considered how it will work when accessed on a mobile phone? Have you 
thought about the business opportunities you may be missing by ignoring mobile 
content? 


The large Flash element on this example blocks the users from getting to the 
main content. 


Include a mechanism such as adding a “Skip to Content” button at the 
beginning of a webpage to rectify the issue in cases where Adobe Flash or 
moving objects must be used. 
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6.2 Small Font Sizes or Insufficient Colour Contrast 


Affected Group: All Persons with Disabilities 
Design websites with larger font sizes and use high contrast colour schemes. 


It is a good practice to provide functions within a website that allow users to 
enlarge the font size. 


In addition, ensure websites are built so that built-in browser text size tools 
work as they should. 


For years, flags have been used by 


people to communicate across Text 
s n Resizing 
distances — especially when at sea. Controls 


A red square on a white 
background means, 

“lam disabled — please 
communicate with me”. 
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6.3 No Alternatives for Non-text Information 


Affected Group: Persons with Seeing Difficulties 


Alternatives should always be provided for non-text information. 


Images should contain descriptive text alternatives that effectively describe 
the images. 


Video content should include text transcripts that can be interpreted by screen 
readers. 


Consider the photo below. If you have this photo on your website, how would 
you communicate what this photo is to a visually impaired person using screen 
readers? 


Screen readers will read the text alternative of the image. Ensure text 
alternatives are meaningful and suitably descriptive. 


The text alternative for this image might read “Photograph of Hong Kong 
Harbour and Hong Kong Island skyline on a sunny day”. 


Photograph of Hong Kong Harbour and Hong Kong Island skyline on a sunny day 
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6.4 Website Structure is Too Complicated to Understand 
and/or Navigate Using Assistive Tools 


Affected Group: Persons with Seeing Difficulties and Hearing Difficulties 


Complex website structures make a website difficult to use for persons with 
and without disabilities. Try to adopt the simplest structure as far as possible 
to convey your content. 


Compare the two examples of webpage layout below. 


The one on the left has five content areas in a less ordered structure and has 
13 additional links. 


The one on the right has four content areas in an ordered structure and six 
additional links. 


While it is sometimes difficult to reduce the number of items on your 
webpages, you can make your webpages simpler, for example, with fewer 
links, so that it will be easier for persons with disabilities to access your 
content. 


RD (we. 
| Rote WJ RS — _ LJ A. — ae = 
AAA AAA 
Ga eeren 
What we do What we do 


Expert Reviews 


Assistive Technologies Range About us Test Automation Expert Reviews 


More Technologies >> i 
Test Automation 


About us 
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6.5 Difficulties in Browsing Websites with Background Audio 


Affected Group: Persons with Seeing Difficulties 


Sound that plays automatically on websites can be annoying to some people, 
and it is particularly so for people who are trying to listen to screen readers. 


Ideally, background sound playing should be user-initiated, or at least there 
is a convenient navigation option to turn off website audio. 


Background 


Audio 
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6.6 Websites with Outdated Text Versions 


Affected Group: Persons with Seeing Difficulties 


Text versions of websites are often neglected, particularly as website changes 
take place over time. 


Webmasters should pay the same amount of attention to maintain these 
sections as they do with other sections. 


eo Web Browser 
& PICIRI + K i 


Home > Web Accessibility Myths 


Web Accessibility Myths 


There are many myths with regards to web accessibility. Some of 
these are outlined below and a good understanding of them will 
help you drive web accessibility in your organisation. 


Myth 1: Web Accessibility Is Expensive 
Many people think buildinga website to be accessible is expensive 
and resist this process. 


The “text version” of 
a webpage should 
be up to date. 
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6.7 For Time-limited Functions, the Time Allowed is Too Short 


Affected Group: Persons with Restricted Movement 


Ideally extend the time limits on websites to ensure users have adequate time 
to interact with the web content. 


If this cannot be achieved, provide a simple mechanism that allows users to 
extend the time limit in the middle of a process. 


2 minutes remaining 


You only have 2 minutes remaining to 
complete this transaction. Do you 
need more time? 


(CD) 
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6.8 Volume Bars are Difficult to Control 


Affected Group: Persons with Restricted Movement 


Design larger volume bars so that interactions with these items using a mouse 
are easier. 


In addition, keyboard shortcuts should be provided for adjusting volume. 


Typical volume sliders, as illustrated below, are difficult to use because the 
portion that needs to be clicked is small and must be moved in subtle 
increments in order to adjust volume. 


Sliders on volume 
controls are small to 
click and require 
subtle movements 


A better approach is to use individual buttons for increasing and decreasing 
volume as these can be clicked rather than slid to change volume. 


This also makes it easier to assign keyboard shortcuts to each button. 


Individual volume 


controls are easier 
to use with a mouse 
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6.9 Ambiguous Links for Screen Readers 


Affected Group: Persons with Seeing Difficulties 


Many websites use links such as “More information” or “Learn more” and have 
these links for various pieces of content. Although this works for sighted users, 
people using screen readers will be confused about which link is which. They 
may discover there are several “More information” links but not know what 
the links point to. 


Websites should use description links in this case. Instead of just stating “More 
information”, a link should state “More information about product XYZ” so that 
the user knows where the link will go to just by reading the text. 


Note how the links below effectively describe what the links are about and 
any user will easily be able to understand the difference between the three 
links. 


om 
i< >j CRX + fel 
AAA 
Home About Contact Services | Support FAQ 
Our Services 
Eye Tracking Testing Consulting 


With eye tracking, you can 
discover if and how your 
customers interact and 
engage with your product — 
whether a website, a 
billboard, or a product on the 
supermarket shelf. 


More info about Eye Trackin 


The goal of functional testing 
is to eliminate the risk of 
undetected defects being 
released into your system 


More info about Testin 


We can even help put in 
place measurement systems 
that ensure total 
organizational commitment 
tothe customer experience 
cause. 


More info about Consultin 
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6.10 Difficulties in Accessing Portable Document Format (PDF) 


Affected Group: All Persons with Disabilities 


PDF documents should only be used for certain situations, in particular when 
you have a piece of content that you would like people to download and read 
offline. In this way, PDF documents can be helpful for persons with disabilities 
because they can download and read them with the assistive functions built 
into PDF reading software. 


We have to ensure that PDF documents are accessible to assistive 
technologies, such as screen readers in a correct reading order. We should 
produce a PDF document from a text-based source document and 
alternative text should be provided for images (except for decorative 
images), so that it is readable by Braille devices used by persons with visual 
impairments. Image-based documents, such as TIF files produced by 
scanning, should be converted into text-based documents with Optical 
Character Recognition (OCR) software prior to producing the PDF document. 


PDF documents also need to be correctly structured and tagged so as to be 
accessible. Software such as Adobe Acrobat has many features that allow 
structure and tagging to be checked and adjusted within a PDF document. 
The techniques of making accessible PDF document is available at 
www.w3.org/WAI/WCAG21/Techniques/# pdf 


Any content that you would like people to read online should be delivered as 
standard HTML webpages rather than PDF documents. 
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assistive functions built into POF 


Producing the PO: 


Optica! Char 
F document. 


Any content that 
you 
as standard HTML we would like people to read online snouid be 


bpages rather than PDF documents. delivered 


This screen illustrates a common problem with PDF documents that have been 
scanned by scanners without OCR processing. Although they appear as text 
to a non-disabled person, they are not text that assistive technology can use. 


PDF documents should only be used for certain situations. This is generally 
when you have a piece of content that you would like people to download 
and read offline, In this way, PDF documents can be helpful for persons 
with disabilities because they can download and read them with the 
assistive functions built into PDF reading software. 


We have to ensure that PDF documents are accessible to assistive 
technologies, such as screen readers, We should produce a POF document 
from a text-based source document so that it is readable by Braille devices 
used by persons with visual impairments. Image-based documents, such as 
TIF files produced by scanning, should be converted into text-based 
documents with Optical Character Recognition (OCR) software prior to 
producing the PDF document. 


One way to test if a PDF document is partly accessible is to try and select a 
Portion of the text with the “text select” function in the PDF reading 
software, Adobe Reader. If text can be selected, then the PDF document is 
produced with proper text rather than images. 


PDF documents also need to be correctly structured and tagged so as to be 
accessible. Software such as Adobe Acrobat has many features that allow 
structure and tagging to be checked and adjusted within a POF document. 


Any content that you would like people to read online should be delivered 
as standard HTML webpages rather than PDF documents. 


PDF documents should be converted in such a way that they are text that 
screen readers can convert to speech if required. 
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7. Accessibility Guidelines 


7.1 World Wide Web Consortium (W3C) 
Web Content Accessibility Guidelines (WCAG) 


Out of the need to support the creation of websites that work for persons with 
disabilities, the World Wide Web Consortium (W3C) put together the 
W3C Web Accessibility Initiative (WAI). This brings together people from 
industries, disability organisations, governments, and research labs from 
around the world to develop guidelines and resources to help make the web 
accessible to persons with disabilities. The Web Content Accessibility 
Guidelines (WCAG) is developed with a goal of providing a single shared 
standard for web content accessibility. (www.w3.org/WAI/standards- 
guidelines/wcag/) 


The WCAG documents explain how to make web content more accessible to 
persons with disabilities. WCAG 2.0 (published on 11 December 2008) and 
WCAG 2.1 (published on 5 June 2018) are both existing standards. WCAG 2.1 
extends WCAG 2.0 by adding 17 new success criteria. 


At first glance the guidelines can appear quite complex. However, the 
guidelines are logical and with some effort, any website developer can 
understand how to use and comply with these guidelines. The most important 
thing to understand is that the guidelines consist of four parts as follows: 


Structure of WCAG 2.1 


4 Principles 


e The guidelines are based upon 4 key principles with 
regards to using websites 


13 Guidelines 


e Within each of these principles are a range of 
guidelines focusing on different types of content 


78 Success Criteria 


e Within the guidelines there are detailed success 
criteria 


Many Techniques 


e Lastly there are techniques that can be used to meet 
the success criteria. 
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The 78 success criteria vary in importance as follows: 


Level A = 


| Level AAA 


Level AA 


Basic Recommended 


Notes: 


e For Level A conformance (i.e. the minimum level of conformance), the 
webpage must satisfy all Level A Success Criteria. 


e For Level AA conformance, the webpage must satisfy all Level A and 
Level AA Success Criteria. 


e For Level AAA conformance, the webpage must satisfy all Level A, Level 
AA and Level AAA Success Criteria. 


7.2 The Guidelines on Dissemination of Information through 
Government Websites 


The HKSAR Government has, since 1999, incorporated web accessibility 
requirements in the Guidelines on Dissemination of Information through 
Government Websites. From 2013 onwards, government websites except 
archive materials are required to validate to W3C WCAG 2.0 Level AA 
conformance. Besides, government bureaux/departments are advised to 
adopt WCAG 2.1 Level AA standard, where appropriate, when carrying out 
major revamp of websites or establishing new websites. We consider that 
level A achieves a minimum level of accessibility only. On the other hand, 
while level AAA provides the highest standard of accessibility, conformance 
to Level AAA may require substantial resources from the organisations under 
certain circumstances. To achieve the right balance, Level AA conformance 
would generally enable persons with disabilities to use a website. We also 
encourage websites to incorporate Level AAA features to further enhance 
accessibility. 
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8. WCAG 2.1 Success Criteria — Level A 


8.1 WCAG 2.1 Success Criterion 1.1.1 — Non-text Content 


All content on a website must be able to be represented in text so that it can 
be read by screen readers. For example, images must have a text description. 


This does not need to be done for Captcha or for images that are for 
decoration only and do not convey meaning. 


Before Rectification 


a> 


le» GAX: 
ee m _— -Ai 


Text Alternatives 


Screen readers are unable to read images without meaningful text 
descriptions. 


After Rectification 


gejo o Mi 
B a tee a Oe 


Web Accosebibry ae 
Heribook H 


For all images, a text description that can be read by the screen reader should 
be included. The text description should enable the person reading the 
webpage to know what the image is about and what it is supposed to illustrate. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/non-text-content 
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8.2 WCAG 2.1 Success Criterion 1.2.1 — Audio-only and Video- 
only (Prerecorded) 


Make prerecorded audio or video accessible by providing alternatives that 
present essentially the same information to people who cannot access the 
original piece. For example, visually impaired persons cannot access video 
and need a way to get this information. 


Before Rectification 


The example shows a video on its own. This will not be accessible for visually 
impaired persons. 


After Rectification 


oon 


Download atranscript of this video 


The video has included an option to download a transcript of the video that 
visually impaired persons will be able to listen to using screen readers. 


WCAG 2.1 Reference: 


https://www.w3.org/WAI/WCAG21/Understanding/audio-only-and-video- 
only-prerecorded 
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8.3 WCAG 2.1 Success Criterion 1.2.2 — Captions (Prerecorded) 


Provide captions for audio tracks so that they are accessible by persons with 
hearing impairments. Captions not only present the content of a conversation 
but also important cues and surrounding noises. 


Before Rectification 


When an audio is embedded in a webpage, the audio is only usable by people 
who can hear. 


After Rectification 


Text captions as shown in the example above should be provided so that a 
person with hearing difficulties can still access the content of the audio. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/captions-prerecorded 
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8.4 WCAG 2.1 Success Criterion 1.2.3 — Audio Description or 
Media Alternative (Prerecorded) 


When a video with audio is uploaded onto a website, a visually impaired 
person will be able to hear the audio but will not be able to see the picture. 
As a result he/she will only have access to part of the information. Websites 
should either provide additional audio that explains what is happening in the 
picture or provide a text transcript that explains both the audio and what is 
taking place in the picture. 


Before Rectification 


With video as shown in the example above, a visually impaired person will be 
able to hear the audio but will not be able to see the picture. He/She needs 
some other ways to know that there is a picture of a person on this screen. 


After Rectification 


Read a text transcript of this video 


A simple solution to this is to provide a text version that includes dialogue and 
also explains what is appearing on the screen. 


WCAG 2.1 Reference: 


https://www.w3.org/WAI/WCAG21/Understanding/audio-description-or- 
media-alternative-prerecorded 
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8.5 WCAG 2.1 Success Criterion 1.3.1 — Info and Relationships 


Users who are not disabled can view the layout of a webpage and quickly 
determine its structure and hierarchy. Persons with visual impairments cannot 
see this layout. The website needs to provide appropriate markup to illustrate 
this structure to screen readers so that it is accessible to persons with visual 
impairments. The links should be categorised into different groups so that 
screen readers are able to determine their relationship. 


Before Rectification 


In this example, there are no headings for the content, links and table 
columns. This is an example of poor structure and relationships as someone 
using screen readers will not be able to get a good overview of the content. 


After Rectification 


(Pian intormation > 
rania a ugut t 


By adding headings and structure to the webpage, persons with visual 
impairments will be able to get a good overview of the content through the 
headings for each of the sections and be able to understand the relationships 
between the content. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships 
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8.6 WCAG 2.1 Success Criterion 1.3.2 — Meaningful Sequence 


If the content needs to be read in a certain order to make sense, ensure the 
webpage is written/coded in a way which indicates this order. 


Before Rectification 


er 


4 FGA XE + ER 
LOONES O SA SON D O) 


In this example, the webpage has been built in such a way that the screen 
readers will read the two headings first and then the content. 


After Rectification 


If the webpage is correctly coded, the reading order will be more logical. In 
this case each piece of content follows its respective heading. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/meaningful-sequence 
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8.7 WCAG 2.1 Success Criterion 1.3.3 - Sensory Characteristics 


Do not rely solely on sound, shape, size or visual location to provide 
instructions for understanding content. For example, if instructions say “to 
submit, click the button to the right”, a visually impaired person will not know 
where that button is. 


Before Rectification 


rlemented 


Question 2: | 


In the example above, it is only clear to a person who can see the webpage 
that he/she needs to click the green arrow. This will not be clear to a visually 
impaired person. 


After Rectification 


Online Multipage Survey 


The correct way to do this is to label the button and ensure clear instructions 
are in place to tell people which button to use and how to use it. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/sensory-characteristics 
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8.8 WCAG 2.1 Success Criterion 1.4.1 — Use of Colour 


Do not rely solely on colours to convey information. It is impossible to be sure 
that everybody perceives colours in the same way (for example the visually 
impaired or those who are colour blind), and what may seem obvious to one 
person may be missed by another. 


Before Rectification 


Q3 business results 


In the example above, the three lines are of different colours, however, a 
colour blind or visually impaired person may not be able to detect this colour 
difference. 


After Rectification 


. 2 
<>» C ÀA 


aa 


x4 4 
oS a A 


By making the items have different shapes, someone who cannot perceive 
colours can differentiate between these items through the different shapes in 
the graph. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/use-of-color 
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8.9 WCAG 2.1 Success Criterion 1.4.2 — Audio Control 


Audio that plays automatically on a webpage is very distracting to persons 
with disabilities using screen readers. Either ensure there is no background 
audio unless specifically selected by a user or allow the user to easily turn off 
the audio. 


Before Rectification 


OS Ces & Ba M 


This video will start in 5 seconds 


In the example above, the video will begin playing automatically in five 
seconds. This is very common on news websites. Ideally the video should only 
play when the user initiates it. If that is not possible, a link can be added to 
turn off the audio. 


After Rectification 


This video will start in 5 seconds 


In this example, we have included a link to turn off the audio at the beginning 
of the webpage so users will find it easily when they first come to this webpage. 
They can then turn off the audio if they choose. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/audio-control 
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8.10 WCAG 2.1 Success Criterion 2.1.1 — Keyboard 


Ensure all content and functions can be accessed via a keyboard. For example, 
ensure content and functionalities are accessible through the Tab key or the 
Enter key. 


Before Rectification 


L IOL 
NUM + a 
AAA 
Home About Contact Services Support FAQ 
Login 


In the webpage above, people using a keyboard may not be able to navigate 
to the help function provided. 


<img src=“question.gif” alt=“Question” onclick=“openPop();” /> 


This extract from the HTML code shows that it can only be accessed with a 
mouse. 


After Rectification 


| <img src=“question.gif” alt=“Question” onclick=“openPop();” 
onkeypress=“openPop();” tabindex="0"/> 


The code needs to be changed to allow users to access all content and 
functions with a keyboard. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/keyboard 
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8.11 WCAG 2.1 Success Criterion 2.1.2 — No Keyboard Trap 


Often people with disabilities can only use a keyboard to control a webpage. 
Ensure the keyboard can be used to control or dismiss dialogue boxes, popups 
or other windows. 


Before Rectification 


> 
< >ICIALXI 


Websites often have popup windows, such as for help content as shown in 
this example. A keyboard user may become trapped in the popup without an 
easy way to return to the main content. 


After Rectification 


. = 
<4 >ICIAIXI + 


By incorporating a Close button in the popup window, users can escape the 
trap of that window by using the Tab key to move to the Close button and 
press Enter. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/no-keyboard-trap 
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8.12 WCAG 2.1 Success Criterion 2.1.4 — Character Key 
Shortcuts 


For keyboard shortcuts using letter, punctuation, number or symbol 
character, at least one of the following is true: 


e Turn off: User can turn off the shortcut; 


e Remap: User can remap the shortcut to include one or more 
non-printable keyboard characters (e.g. Ctrl, Alt); or 


e Active only on focus: The shortcut is active only on focus. 


Before Rectification 


S 

( Archiving ; 

A email.. | 

A S l l Á Â. — 2 
Web Mail 
te 

Subjert ® 


(Speech-input user) 


The character “e” is used as a shortcut key for archiving the email. When a 
speech input user reads “e” as one of the input texts, the archive function is 
automatically initiated. 


After Rectification 


(Speech-input user) 


A function is added for users to turn off the shortcut key feature. The speech- 
input user is now able to input the text without invoking the shortcut key 
function. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/character-key-shortcuts 
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8.13 WCAG 2.1 Success Criterion 2.2.1 — Timing Adjustable 


Ideally ensure processes on a website are not time dependent. If they are, 
ensure persons with disabilities can either adjust or stop the time limit so they 
can have enough time to complete their task. 


Before Rectification 


2 minutes remaining 


4 “1 


This example warns a person that time is about to expire. 


After Rectification 


4> GA x + 
ct ete cel — la 


2 minutes remaining 


A better approach is to allow the person to extend the time. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/timing-adjustable 
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8.14 WCAG 2.1 Success Criterion 2.2.2 — Pause, Stop, Hide 


For content that moves automatically for more than five seconds or is updated 
automatically, there needs to be a way to stop this movement and stop the 
webpage from updating, blinking or scrolling. 


Before Rectification 


eo. = 
+r G AX +? 


Live Soccer Commentary 


CLUSA VS CLUBS 


85 minutes Player A passes the bell and trees 10 pass it 


83 minutes Player C tackies the ball ancl thes tò shoot 


82 minutes Player D shoots Me Dall owes Me top 


82 minutes Player E saves thw Dall 


82 minutes Player E dnbales awe 


In the example above, the webpage is designed to update automatically as 
content changes, which can be very frustrating for people using screen 
readers. 


After Rectification 


Live Soccer Commentary 
ate: 


CLUBA vS CLUBB 


86 minutes Player A passes the ball and ines to pass it 


83 minutes Player C tackles the ball and ines to shoot 
parae Player O shoots the hall over tre tor ~~ 

82 minutes Player € SERERE 

82 minutes Player E Gribtles away iron Playee C 


By providing a function to turn off the auto updating, the webpage will be 
much easier for persons with disabilities to use. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/pause-stop-hide 
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8.15 WCAG 2.1 Success Criterion 2.3.1 — Three Flashes or 
Below Threshold 


Ensure all flashing items are dimmed, and cover only a small area of the 
screen or the flash rate is three times per second or less. Otherwise, this may 
cause problems for people who suffer from epilepsy. 


Before Rectification 


In this example, the traffic light image is flashing too fast, and is too bright 
and covers a large part of the screen. This content can cause seizures in 
people prone to this problem. 


After Rectification 


le 
<> OC AX + 


Using Green Man Crossings 


Green man crotengs are pedestrian 
crossings with traffic fights to signal 


drivers to stop, and pedestrian lights 


to signal pedestrians when to cross. 


It is better to replace flashing content with static content, or ensure the object 


flashes in only a small portion of the screen or the flash rate is less than three 
times a second. 


WCAG 2.1 Reference: 


https://www.w3.org/WAI/WCAG21/Understanding/three-flashes-or- 
below-threshold 
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8.16 WCAG 2.1 Success Criterion 2.4.1 — Bypass Blocks 


Ensure users have the ability to skip past repetitive blocks of content (e.g. 
the navigation at the top of the webpage). Add a link that goes directly to the 
main content at the top of each webpage. 


Before Rectification 


ei 


Home 


This Handbook is designed for senior oxocutives and managers to better 


y and show how it can be 


y implemented. Some organis may consider their 


es to be “accessible” when the websites ere easily found by search 


engines. However, the core principle of web accessibility is not about 
whether peaple “can find you", itis about whather all people, irrespective 
of age, race, education or disability, can access to information in 


websites. 


With such a webpage, people using screen readers will need to read all the 
navigation information before getting to the target content. People who 
navigate using only a keyboard will require many keystrokes before getting 
to the target content. 


After Rectification 


Home 


This Handbook is designed for senior executives and managers to better 
understand the importance of web accessibility and show how it can be 
successfully implemented. Some organisations may consider their 
websites to be “accessible” when the websites are easily found by search 
engines. However, the core principle of wob accessibility is not about 
whether peaple “can find you", itis about whether all people, Irrespective 
of age, race, education or disability, can scoess to information in 

websites 


By adding a “Skip to content” link at the top of each webpage, persons with 
disabilities will be able to click that link and bypass the navigation information 
to get to the main content. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/bypass-blocks 
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8.17 WCAG 2.1 Success Criterion 2.4.2 — Page Titled 


Give webpages a title that accurately describes what the content is about. 
This will help persons with disabilities differentiate the webpages in their 
browser history. 


Before Rectification 


AAA 


Home 


This Handbook fs designed for senior executives and managers to better 
understand the importance of web accessibility and show how it can be 
successfully implemented, Some organisations may consider their 
websites to be “accessible” when the websites are easily found by 

search engines, However, the core principle of web accessibility is not 
about whether people “can find you", Itis about whether ali people. 
irrespective of age, race, education or disability, can access to 
information in websites. 


It is quite common to see webpages with inaccurate titles such as this one 
where the webpage is simply named “Home”. This can easily be confused with 
other Home page. 


After Rectification 


AAA 


Home 


This Handbook ts designed for senior executives and managers to better 
understand the importance of web accessibility and show how it can be 
successfully implemented, Some organisations may consider their 
websites to be “accessible” when the websites are easily found by 
search engines, However, the core principle of web accessibility ls not 
about whether people “can find you”, itis about whether all people 
irrespective of age, race, education or disability, can access to 
information in websites 


A proper title such as this one will accurately describe what this webpage is 
about. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/page-titled 
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8.18 WCAG 2.1 Success Criterion 2.4.3 — Focus Order 


When writing the HTML code for a webpage, make sure the content is coded 
in a logical order. It will then be communicated in a logical manner when read 
by screen readers. This is particularly important for web forms. 


Before Rectification 


Rz 


< >ICLALXI ->+ 


Contact Us 


First Name | Last Name 
Address | | fn 
Phone C E “al 


In this example, the form has been coded so that the focus order goes from 


First Name, to Address, to Phone, then to the Submit button. This is not 
intuitive to a user. 


After Rectification 


eo 
ii 1%) LP X 
(SaD eee e 


Contact Us 
First Name: E a Last Name 


Address a> Suburb 3 ] 


Phone | ] 


With proper coding, the focus order of the form can move in a much more 
logical manner. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/focus-order 
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8.19 WCAG 2.1 Success Criterion 2.4.4 — Link Purpose (In 
Context) 


Write descriptive link text to ensure the purpose of each link can be 
understood by the text alone, or by the link text and the context. 


Before Rectification 


Have expertise in corporate 
governance? 


In the example above, the link “Yes” is ambiguous and does not really convey 
much meaning. 


After Rectification 


ar Gla x). 


Have expertise in corporate 
governance? 


> Here's an opportunity te share your skills 


Link labels should be more descriptive and self-explanatory as shown in the 
rectified version above. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context 
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8.20 WCAG 2.1 Success Criterion 3.1.1 — Language of Page 


Ensure the primary language of a webpage is defined within the HTML code. 
The correct speaking language will be loaded by screen readers to read the 
words in the webpage. 


HIE 


MAAS + PERSIE ARREST EBs + UHR 
SUF ERR aera aR aR ere toms ° 

Wi PSR RSE ISA ie + 
TT SIM FITTS Ie 


RALA TPR AREH RIE Slam, + USSSA Tee o 


BM ese EMH ° 
PTR ATLEAST SER 


The example above is written in Chinese. When using screen readers, it is 
important for the tool to know the language of the webpage. 


Before Rectification 


<html xmlns="http://www.w3.org/1999/xhtml"> | 


After Rectification 


<html xmLns="http://www.w3.org/1999/xhtmL" xml :lang="zh-CN" lang="zh-CN"> | 


In order for the screen reader to work correctly, the above language 
specification must be included in the HTML code. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/language-of-page 


Version 1.8 Page 41 


Web Accessibility Handbook WCAG 2.1 Success Criteria - Level A 
8.21 WCAG 2.1 Success Criterion 3.2.1 — On Focus 


When an item on a webpage receives focus, such as by using the Tab key in 
the keyboard, ensure it does not change the context. For example, by 
displaying a dialogue box when a person tabs to a field. 


Before Rectification 


Online Form 


User Code. | Help 


Quartion [ 


In this example, a field receives focus, and a help dialogue box describing the 
field and providing options opens. As a keyboard user tabs through the 
webpage, the dialogue opens, moving the keyboard focus away from the 
control every time the user attempts to tab past the field. 


After Rectification 


“~ 


hs i) te + 
(m a E 


Online Form 


User Code (=p 


Question: | 


Instead, the webpage should allow the user to activate “Help” only at their 
choice rather than forcing them to read “Help” with each tabbed field. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/on-focus 
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8.22 WCAG 2.1 Success Criterion 3.2.2 — On Input 


Changing a setting on a webpage should not cause a change of context such 
as opening a popup window or refreshing content. In addition, users should 
not be taken away from a webpage when changing something without warning. 


Before Rectification 


Online Form 


iectancet - 


It is common to see drop down menus on webpages that, when changed, 
cause the form to be automatically submitted. This can make the website very 
difficult to use for persons with disabilities. 


After Rectification 


This option is much better as it gives the user control over when to submit 
the form. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/on-input 
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8.23 WCAG 2.1 Success Criterion 3.3.1 — Error Identification 


If a user makes a mistake, use text to show him/her where and what he/she 
has done wrong, and how he/she can fix it. 


Before Rectification 


<» LS & E le 


Online Form 


The form contains errors 
Name: [Joh 1 Smith 


Phone 2345578x 


In the screen on the above, an error has been identified without any 
information on where the error is and what needs to be fixed. 


After Rectification 


<» Cin xi + E la 


AAA 


Online Form 


Please use only numbers in the phone field 
Name: | John Smith 


Phone 2345578x 


This is made accessible by telling the user where the error has occurred and 
what he/she needs to do to fix the error. 


WCAG 2.1 Reference: 


https://www.w3.org/WAI/WCAG21/Understanding/error-identification 
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8.24 WCAG 2.1 Success Criterion 3.3.2 — Labels or Instructions 


To help persons with disabilities avoid making mistakes, it is good to provide 
simple instructions and cues for entering information into forms. For example, 
use labels, instructions and examples. 


Before Rectification 


| > 
+> GA x: 


Contact Us 


first Name l last Nama [ 


Address | Suburb 


Phone 


The above screen is a typical “Contact Us” form. However, there is no 
information on what format to use to enter the phone number. 


After Rectification 


Phone: Enter phone area code and number 


By adding default instructions to the fields, a visually impaired person can 
complete each field easily. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions 
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8.25 WCAG 2.1 Success Criterion 4.1.1 — Parsing 


Ensure the webpage is written/coded correctly. For example, implement 
complete start and end tags for all elements. This ensures that the screen 


reader accurately reads the webpage. 


Before Rectification 


———— 
Breakfastmenu.xmi 
<breakfast_menu> 


<food> ox 
<name>Beigian Waffies</nar —— 
<price>$5.95</prica>e = 


<descriptionn> 

Two of our famous Beigian Waffles with plenty of real maple 
syrup 

</description> 

<calories>650 </calores> 

<ood> 


<food> 

<name>Bacon and Eggs</name> 

<price>$7.95</price> 

<description> 

Bacon and eggs served on toast 

</description>” =. Missing a *</calories>” 
<calories>900 3 = 

<ffood> 


<breakfast_menu> 


After Rectification 


Breakfastmenu.xml 
<breakfast_menu> 


<food> 

<name>Belgian Waffles</name> 
<price>$5.95</price> 

<description> 

Two of our famous Belgian Waffles with plenty of real 
maple syrup ] 
</description> All tags have opening | 
<calories>650</calories> and closing structures 
</food> __-—~ and are spelled 

<food> = correctly 
<name>Bacon and Eggs</name> 

<price>$7.95</price> 

<description> 

Bacon and eggs served on toast 

</description> 

<calories>900</calories> 

</food> 


<breakfast_menu> 


WCAG 2.1 Reference: 


https://www.w3.org/WAI/WCAG21/Understanding/parsing 
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8.26 WCAG 2.1 Success Criterion 4.1.2 — Name, Role, Value 


Ensure all elements on a webpage have a “Name”, “Value” and “Role” 
assigned to them. This can generally be achieved by writing correct HTML 
coding according to relevant standards. If this is not done correctly, screen 
readers will read the wrong role for an element. In the example below, the 
screen readers will consider the button as an image. This makes the website 
confusing for visually impaired persons. 


Before Rectification 


<img src="go.gif" alt="Go" onclick="submitForm();" /> 


With the code snippet above, an image is used for a button. In this case, a 
wrong role is used for an element and the element is missing a name. 


After Rectification 


<input type="button" value="Go" name="go button forml" /> 
p ype p — 


With proper HTML coding, the role is used, and the input element is of the 
button type. In addition, a unique name has been given to the element. In 
this way, the screen readers will communicate to the user that the element is 
in fact a button and this in turn makes it easier for the user to know he/she 
may need to click that button. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/name-role-value 
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8.27 WCAG 2.1 Success Criterion 2.5.1 — Pointer Gestures 


Complex gestures, such as swiping, dragging a slider or two-finger pinching 
for zooming, can be performed through simpler actions like taps or long 
presses. 


Before Rectification 


Home | About | Contact | Services | Support | FAQ 


Volume Control 


1—— 4) 


The dragging of a slider requires a precise path of the user's pointer 
movement to control the volume. 


After Rectification 


Gia 


Home | About | Contact | Services | Support | FAQ 


Volume Control 


Buttons are added as an alternative way for users to adjust the volume with 
simple clicks. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/pointer-gestures.html 
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8.28 WCAG 2.1 Success Criterion 2.5.2 — Pointer Cancellation 


Functions are completed by the up-event (e.g. release the mouse button or 
remove the finger from the screen) and either one of the following 
mechanisms is available: 


e To abort the function before completion; or 
e To undo the function after completion. 


There is exemption when the down-event is essential such as in the piano 
keyboard emulation program. 


Before Rectification 


When the user makes a donation by clicking 


[vere | eet | Swe | Sevres | wert | Pt | the confirm button, the donation is confirmed 
Make à Donation before the user releases the mouse button. 
EG AKDORKHON There is no way for the user to abort the 
function after he/she has pressed the mouse 

button. 


After Rectification 


Make a Donation Make a Donation 


THANK YOU 
FOR YOUR DONATION! 


The donation will be confirmed only if the user presses and releases the mouse 
button at the clickable area. If the user wants to abort the function after 
pressing the mouse button, he/she can drag the mouse pointer out of the 
clickable area, then release the mouse button. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/pointer-cancellation.htm! 
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8.29 WCAG 2.1 Success Criterion 2.5.3 — Label in Name 


All visible text labels must match their programmatic names to facilitate users 
using speech-to-text technologies to interact with the content based on an 
intuitive visual label. 


Before Rectification 


Buy Cola.. 
Buy Soda.. 
Buy Juice.. 
Drinks 
SS = = ° 


(Speech-input user) 


When a speech-input user speaks a command “Click Buy”, the speech input 
does not activate the button control because the programmatic name that is 
enabled as a speech-input command does not match with the visible text 
label. 


After Rectification 


Buy Cola.. 
Buy Soda.. Buy Cola.. 
Buy Juice.. 
Buy Soda.. 
Drinks j 
Buy Juice.. 
Cola Soda Juice ° 
$5.00 $12.00 $8.00 


<= <== EA 


(Speech-input user) 


The programmatic names are exactly the same as the visual text labels of the 
buttons, so that the speech-input user can activate the control by speaking 
the visual text label. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/label-in-name.html 


Version 1.8 Page 50 


Web Accessibility Handbook WCAG 2.1 Success Criteria - Level A 


8.30 WCAG 2.1 Success Criterion 2.5.4 — Motion Actuation 


Functions triggered by moving a device (e.g. shaking or tilting) or by 
gesturing towards the device (e.g. a camera can interpret the gesture and 
activate a function) should be able to be operated by more conventional user 
interface components. 


Before Rectification 


To view a 360-degree photo, users are required 
to either move the device around to change the 
view or tap and drag on the photo. Users with 
mobility difficulties are difficult to perform these 
actions. 


City in 360 View 


A i 
wi 
È 


Navigation buttons are added as an 
alternative for navigation. Users can either 
move the device around to change the view 
or click the navigation buttons to perform the 
same function. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/motion-actuation 


Version 1.8 Page 51 


Web Accessibility Handbook WCAG 2.1 Success Criteria - Level AA 


9. WCAG 2.1 Success Criteria — Level AA 


9.1 WCAG 2.1 Success Criterion 1.2.4 — Captions (Live) 


Ensure all audios and videos that are presented “live” have captions. 


Before Rectification 


When an audio is embedded in a webpage as shown above, the audio is only 
usable by people who can hear. 


After Rectification 


Text captions should be provided so that persons with hearing impairments 
can still have access to content from the audio as shown in the example 
above. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/captions-live 
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9.2 WCAG 2.1 Success Criterion 1.2.5 — Audio Description 
(Prerecorded) 


Provide a descriptive audio track in addition to the prerecorded video so that 
visually impaired persons can still use the webpage without the video. 


Before Rectification 


When providing a video for users on a webpage, it is important to make sure 
that an audio description of this video is also present so people who cannot 
view the video can still understand the content. 


After Rectification 


An audio description of the video should be provided so visually impaired 
persons may listen to the description and understand what the video is about. 


WCAG 2.1 Reference: 


https://www.w3.org/WAI/WCAG21/Understanding/audio-description- 
prerecorded 
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9.3 WCAG 2.1 Success Criterion 1.3.4 -— Orientation 


Unless a specific display orientation is essential, the content should be able 
to be viewed or operated in either portrait or landscape orientations. 


Before Rectification 


Users are unable to change the orientation of the 
video clip as the video player restricts its display 
orientation to landscape. 


After Rectification 


Persons with physical disabilities may mount 
the device on a wheelchair in a fixed 
orientation. By not restricting the display 
orientation, users can view the content in the 
orientation that suits them best. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/orientation.html 
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9.4 WCAG 2.1 Success Criterion 1.3.5 -— Identify Input Purpose 


Autocomplete attribute techniques should be used for each input field to 
make form filling easier, especially for people with cognitive disabilities. 


Before Rectification 


é ca 
Home | About | Contact | Services | Support | FAQ 


Order Detail 


Name : 


Gender : 


Mobile : 


Address : 


| Submit || Cancel | 


The user is required to input personal information from scratch. 


After Rectification 


é ca 
Home | About | Contact | Services. | Support | FAQ 


Order Detail 


Name: 


Gender: | Peter Pan Flat W, 30/F, Block A, 
Mobile: | Autofill settings 


Address : 


Submit || Cancel | 


Enabling the autocomplete attribute improves the browser’s ability to 
pre-populate form fields with user-preferred values. It allows the user to 
complete the form easily. 


WCAG 2.1 Reference: 


https://www.w3.org/WAI/WCAG21/Understanding/identify-input- 
purpose.html 
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9.5 WCAG 2.1 Success Criterion 1.4.3 — Contrast (Minimum) 


Design text and images so that they have a contrast ratio of at least 4.5:1 
between the background and the foreground to make it easy to read. 


Before Rectification 


im. 


toa yng 
as a LIS & ac a 


AAA 


In this example, the white text on the pink background has poor contrast, 
making it hard to read. 


After Rectification 


1- 
as id (9) LES E į 


AAA 


successfully implemented. Some or 


websites to be “accessible” when the 


engines. However, the core principle of wab accessibility is not about 


When higher contrast text is used, the text is much easier to read. There are 
colour contrast checkers available online that can assist web developers to 
check the contrast of their webpages. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum 
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9.6 WCAG 2.1 Success Criterion 1.4.4 — Resize text 


Ensure all text can be resized up to 200% without the loss of content or 
functionality. In this way, persons with mild visual impairments can read the 
content without using assistive technologies such as a screen magnifier. 


Before Rectification 


In the screen above, there are no functions to resize the text. 


After Rectification 


Resize text: Understanding Success Criteria 1.4.4 


Some organisations may consider their websites to be “accessible” when the 
websites are easily found by search engines. However, the core principle of web 
accessibility is not about whether people “can find you”, itis about whether all 
people, irrespective of age, race, education or disability, can access to information in 
websites. 


By adding a function to change the text size in the masthead, text size can 
be easily resized. Alternately, ensure websites are built so that built in 
browser text size tools work as they should. Developers should also be 
mindful of using proper cascading style sheet (CSS) techniques to ensure 
the CSS works with the built in browser resize functions. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/resize-text 


Version 1.8 Page 57 


Web Accessibility Handbook WCAG 2.1 Success Criteria - Level AA 
9.7 WCAG 2.1 Success Criterion 1.4.5 — Images of Text 


Where possible, do not use images to display text. Accessibility tools like 
screen readers cannot read text inside an image and will have to rely on the 
image alt tag. In addition, text in images cannot be resized by browsers 
when a user chooses to use larger fonts. 


Before Rectification 


Ls 
4r Gax 


ee ee es EE | 


The heading on the webpage above has the risk of being read incorrectly by 
some screen readers or other assistive tools. 


After Rectification 


« Cj + 4 
EE OEE 


This text heading above does not use an image, thus increasing the chance 
of it being read correctly by screen readers or other assistive tools. Any visual 
design applied to this text is achieved through cascading style sheets (CSS). 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/images-of-text 
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9.8 WCAG 2.1 Success Criterion 1.4.10 — Reflow 


When a webpage is zoomed, the content is presented without loss of 
information and functionality, and without requiring horizontal scrolling. 


Before Rectification 


services Support 


Web / Mobile App Acces: 
Background 


The web is a predominant channel for diss 
information and providing services to the į 
usefulness will be greatly enhanced if the « 
accessible by the widest possible audience 
persons with disabilities. 


A Multi-pronged Strategy ” 


When users zoom in to enlarge the size of the content, they have to scroll 
both horizontally and vertically to view the content. 


After Rectification 


a = 
Web / Mobile App Accessibility 
Campaign 
Background 


The web is a predominant channel for disseminating 
information and providing services to the public. Its 
usefulness will be greatly enhanced if the contents 
are accessible by the widest possible audience, 
including persons with disabilities 


A Multi-pronged Strategy 


The Office of the Government Chief Information - 


By using responsive web design, the page layout is changed automatically 
when it is zoomed, so that horizontal scrolling is not required. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/reflow.html 
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9.9 WCAG 2.1 Success Criterion 1.4.11 - Non-Text Contrast 


All non-text content (e.g. graphics, diagrams, buttons, checkboxes, radio 
buttons or input fields), which deliver important information, should have a 
minimum 3:1 colour contrast ratio against adjacent colour. 


Before Rectification 


é ca 
Home | About | Contact | Services | Support | FAQ 


Order Detail 


Name: 
Gender : 
Mobile : 
Address : 


Submit || Cancel 


The grey textboxes on the white background have poor colour contrast, 
making it harder for persons with low vision to identify. 


After Rectification 


é œa 
Home | About | Contact | Services | Support | FAQ 


Order Detail 


Name: 


Gender : 


Mobile : 
Address : 


| Submit | | Cancel | 


Dark border is applied to the textboxes so that they can be identified easily. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html 
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9.10 WCAG 2.1 Success Criterion 1.4.12 - Text Spacing 


Ensure the content or functionality will not be lost if user overrides the setting 
for spacing between paragraphs, lines, words or characters. 


Before Rectification 


Wah / Mahila Ann Arrocethility Camnaten 


anaa me AE r hi {line-height:150px} 
Maung Digetal Content laran S at A 
ant channel for disseminating information ané h2 {line-height: 100px} 


proveding services to the public. Its usefulness will be greatly enhanced if 
the contents are accessible by the widest possible auctence, including 


persons with disabilities, 


A Multi-pronged Strategy 


The line height of header (h1) and sub-header (h2) texts is defined using 
absolute values (i.e. number of pixels). When the user zooms in to enlarge 
the content of the webpage, the header and sub-header texts are cut off and 
become unreadable. 


After Rectification 


hi {line-height: 100%} 
h2 {line-height: 100%} 


The web ts a predominant channel for disseminating information and 
providing services to the public, Its usefulness will be greatly enhanced if 
the contents ate accessible by the widest possible audience, including 

persons with disabilities 


The line height of h1 and h2 is defined using relative values (i.e. percentage). 
When the page is zoomed by the user, the line height of h1 and h2 is changed 
accordingly such that the content can be displayed clearly. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/text-spacing.html 
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9.11 WCAG 2.1 Success Criterion 1.4.13 -— Content on Hover or 


Focus 


If additional content appears on focus/hover, you should ensure all of the 


following: 


e Dismissible: User can dismiss the additional content with the keyboard 
without moving focus/hover, e.g. via the escape key; 


e Hoverable: User can move the pointer over the additional content 
without making the additional content disappear; and 


e Persistent: The additional content remains visible until the hover or 
focus trigger is removed, or the user dismisses it, or its information is 


no longer valid. 


Before Rectification 


Access to information 


important Notices 


Public Forms Restricted Forms 


Electronic Services 


Enquiry - Service Hotlines M 


feedback Related Links 


Privacy Policy 


The web is a predominant channel for disseminating information and 
providing services to the public, Its usefulness will be greatly enhanced if 
the contents are accessible by the widest possible audience, including 


persons with disabilities 


After Rectification 


Web / Mobile App Accessibility Campaign 
Web/Mobile App Accessibility Campaig 


ee es) 
Making Digital Content Avedenie far ALL 


J 


Background 


The wed is a predominant channel for disseminating Information and 


ents are accessible by the widest possible audience, including 


persons with disabilities 


WCAG 2.1 Reference: 


rvices to the public. its usefulness will be greatly enhanced if 


When user activates the 
“Support” menu via keyboard, a 
mega menu is displayed, which 
covered part of the main content. 
User is unable to view the content 
unless he/she moves the mouse 
pointer away from the mega 
menu. 


Function is added for user to 
close the mega menu by 
pressing Escape key without 
moving the mouse pointer. 


https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or- 


focus.html 
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9.12 WCAG 2.1 Success Criterion 2.4.5 — Multiple Ways 


Ensure there is more than one way to access a webpage, for example, by 
using a search function, site map, standard navigation, etc. 


Before Rectification 


Multiple Ways 


With the rapid growth of the internet, ensuring that websites are 


accessible to persons with disabilities is now an essential consideration to 
enable thelr full integration into society. 

Some organisations may corsider their websites to be “accessible” when 
the websites are easily found by search engines, However, the core 
principle of web accessibility is not about whether people “can find you", it 
is about whether all people, irrespective of age, race, education or 
disability, can access to information in websites, 


The only way to navigate around this website is through the main navigation. 


After Rectification 


Multiple Ways 


With the rapid growth of the internet, ensuring that websites are 
accessible to persons with disabilities is now an essential consideration to 
enable their full integration into society. 

Some organisations may consider thelr websites to be “accessible” when 
the websites are easily found by search engines. However, the core 
principle of web accessibility is not about whether people “can find you", it 
is about whether all people, irrespective of age, race, education or 
disability, can access to information in websites. 


In this image, a search function and a site map have been included for users 
to have multiple methods available to locate the required information. 
Something like a site map would also be helpful to users who have learning 
disabilities or have difficulties in concentrating for a long period of time. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/multiple-ways 
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9.13 WCAG 2.1 Success Criterion 2.4.6 — Headings and Labels 


Headings and labels must be accurate descriptions of the accompanying 
content. 


Before Rectification 


Io 
4 PCI ALXE + Q 


AAA 


About Contact Services Support FAQ 


Asian Golden Cat, Caracal, Chinese Mountain 
Cat, Eurasian Lynx, Lion, Marbled Cat, Snow 
Leopard, Tiger. 


The heading “Cats” shown above does not accurately describe the purpose 
of the content beneath it. 


After Rectification 


a= 
pile O L xi + Q 


AAA 


About Contact Services Support FAQ 


Types of Cat in Asia 


| 


Asian Golden Cat, Caracal, Chinese Mountain 
Cat, Eurasian Lynx, Lion, Marbled Cat, Snow 
Leopard, Tiger. 


The image above however shows a more detailed heading that accurately 
describes the content. This would assist users using a screen reader. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels 
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9.14 WCAG 2.1 Success Criterion 2.4.7 — Focus Visible 


When a “text field” is selected, ensure it is clear that the focus has been 
moved into the “text field”. For example, ensure the cursor is easily visible 
within the field so that users know where to begin typing. 


Before Rectification 


Bank: | |9 


Password 


In the image above, there is no way to determine which field has the focus. 


After Rectification 


This image ensures that the vertical bar is visible. This shows that the focus 
is currently on the second field, and this helps those users with low vision or 
visual impairments determine where they are on a webpage. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/focus-visible 
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9.15 WCAG 2.1 Success Criterion 3.1.2 — Language of Parts 


Write content so that the language of all passages and phrases can be clearly 
understood. This will enable screen readers to pronounce each item in the 
correct language. 


Before Rectification 


>= 
ar OAY 
eke I LI u Ge —— a s 
AAA 
Overview 
{ hen Sie D sch? Review this le 
beginne rman 
>| 


Example Code: 
<p> 
Sprochen Sie Deutsch? 


Review this module to learn some beginner's German 
</p> 


In the example above, the majority of the website is in English. However, 
a small section is in German. In this case, it is essential to define this 


change in language, so that screen readers can detect the change and 
pronounce correctly. 


After Rectification 


AAA 


Example Code 
<blockquote x«miiang="de"> 


Sprecher Sie Deutsch —=s 
</blockquote> 
<blockquote »<mislang="en-GB"> 

Review this module to learn some beginner's Gema 


</blockquote> 


The image above shows how this code should look like so that the screen 
readers can detect and pronounce the words using the proper languages. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/language-of-parts 
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9.16 WCAG 2.1 Success Criterion 3.2.3 — Consistent 
Navigation 


Where navigations or links are on multiple webpages, ensure they are 
presented consistently across all pages. 


Before Rectification 


The style is not consistent across multiple webpages. This could be confusing 
for visually impaired persons. 


After Rectification 


P= D 
As PEGA AIX) - ye j 


The example above shows the correct method to ensure the navigation is 
consistent across multiple webpages. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/consistent-navigation 
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9.17 WCAG 2.1 Success Criterion 3.2.4 — Consistent 
Identification 


For all items that have the same functionality, ensure they use the same 
label. For example, a "Buy Now" button on one webpage should be identically 
labelled as a "Buy Now" button on another webpage so that the user knows 
these buttons would perform the same function. 


Before Rectification 


Broadband + Home Phone $69.95 Blackberry 


Stay in touch with $29 call value, included ine 


3.5" Touchscreen 
rental, plus loads of dats 


SMP Camera 


GPS Navigation 
iC interested? Buy Now Crane) 


In the example above, there are two buttons each having a different label. 
This could cause confusion for some users, especially for those using screen 
readers, who may not be able to take note of the similarities between these 
two buttons. 


After Rectification 


Broadband + Home Phone $69.95 Blackberry 


Stay in touch with $29 call value, included line oa 
5 Touchscreen 
ental, plus loads of data Panai 
SMP Camera 


GPS Navigation 


The two “Buy Now” buttons are consistent above and it is clear that both 
would perform the same function. 


WCAG 2.1 Reference: 


https://www.w3.org/WAI/WCAG21/Understanding/consistent- 
identification 
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9.18 WCAG 2.1 Success Criterion 3.3.3 — Error Suggestion 


When a user makes an error and the solution can be identified automatically, 
always provide the user with a suggestion to fix the error. 


Before Rectification 


Online Multipage Survey 


The example above shows an error message that is not helpful enough 
because it is located at the bottom of the webpage, and does not provide an 
adequate description of what needs to be corrected. 


After Rectification 


l 
s 


Online Multipage Survey 


Frot: Please provide your home address 


=» 


In contrast, this example shows a message that is located at the top of the 
webpage and provides a good explanation of what needs to be corrected. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/error-suggestion 
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9.19 WCAG 2.1 Success Criterion 3.3.4 — Error Prevention 
(Legal, Financial, Data) 


If a user has to submit data that have legal or financial consequences, make 
sure the system allows the user to check and confirm his/her information 
before submitting, or reverse the transaction after submitting. 


Before Rectification 


* = 


<> GCA x 


Step 3 of 3: Complete Transaction 
Your Order 
Vanilie Scented Candle arr? 


Crystal Candie Holder arvi 


Total- $220.00 


| Piace Order 


This screen indicates the last step of a transaction, in which the user is forced 
to place the order without a confirmation process. 


After Rectification 


Step 3 of 4: Complete Transaction Step 4 of 4: Confirm Transaction 


Your Order Your Order 
Vanilla Scented Candle Qry.2 Vanilla Seented Candle aQry:2 
Crystal Candle Holder am: Crystal Candle Holder ami 


Tetak $220.00 


Backtonevie Cl] _ConfirmOrder_] > 
io 


It is better to allow the user to first confirm and give him/her the option to 
change any of the details before the final submission. 


WCAG 2.1 Reference: 


https://www.w3.org/WAI/WCAG21/Understanding/error-prevention- 
legal-financial-data 
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9.20 WCAG 2.1 Success Criterion 4.1.3 - Status Messages 


For any visible status message (e.g. error or success message subtly added 
to a page), users should be informed by means of assistive technology tools 
even though the status message is not in focus. One possible way to 
implement this criterion is to define the Accessible Rich Internet Application 
(ARIA) role (status, alert) or Live Regions. 


Before Rectification 


A spinning logo with “searching” status message appears after user initiates 
the search function. However, screen reader cannot read out the status 
message because it is not in focus. 


After Rectification 


Searching... 


By assigning appropriate ARIA role to the status message, the screen reader 
is able to read out the message to inform users about the content change 
even though the status message is not in focus. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/status-messages.html 
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10. Five Testing Techniques for Web Accessibility 


To ascertain web accessibility, testing is the key to finding and understanding 
issues to be rectified along the way. Five techniques for web accessibility 
testing are outlined below. 


10.1 Code Scanning 


Many accessibility issues can be detected automatically using software tools. 
These tools should be used to test the webpage coding during the 
development stages and when performing a web accessibility audit of a 
website. 


After completing code scanning and when all identified issues are rectified, 
carry out other forms of testing as mentioned below to check for items that 
cannot be tested automatically. 


Example Tools: 


AChecker 

Axe DevTools 
Total Validator 
WAVE 


10.2 Visual Review 


A great deal can be learnt about the accessibility of a website just by visual 
browsing while having in mind the following questions: 

e Can the content be easily read? 

e Can the forms for collecting input be used effectively? 


We suggest paying particular attention to anything visual that might not 
work well for persons with visual impairments, for example: 


e Is the text too small? 


e Does it use pale coloured text on a pale background, making the text 
hard to read? 


A simple look at a website can reveal many potential web accessibility issues 
for persons with disabilities. 


Some recommended approaches that should be included in a visual review 
are: 


e Turn off cascading style sheets (CSS). This is how your website will 
often be interpreted by screen readers. Does the content have a logical 
flow and structure? 


e Try using the built in browser text enlargement functions. Do they 
work? 
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e Try moving around the webpages using just a keyboard. Can we 
access all the links and functions? 


Example Tools: 


e Colour Contrast Analyser 
e WCAG Contrast Checker 
e Web Developer (Firefox plugin) 


10.3 Manual Testing with Screen Readers 


An easy way to experience how persons with visual impairments use a 
website is to simply turn off the monitor and attempt to use the website with 
screen readers. 


e Navigate the website and determine just how much information we 
can access through the screen readers. 

e Try reading the headings, navigations, images, and also test more 
complex features such as input forms and tables. 


Example Tools: 


JAWS 

NVDA 
VoiceOver 
Windows Light 


10.4 Testing with Other Tools 


Other than screen readers, persons with disabilities may use a variety of 
other tools to interact with a website. Two particular types of widely used 
tools are: 


Screen Magnification Tools - these commonly used tools allow people to 
zoom into sections of a screen and change the contrast levels. 

e Test a website with these tools and rectify issues found. 
Voice Control Tools - some severe motor disabilities leave using voice 


commands as the only means to interact with a website. People speak into 
a microphone with commands such as “next link”, “go”, etc. 


e Testing using these tools reveals issues which are difficult to identify 
through the other methods. 
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Example Tools: 


e ZoomText Magnifier 
e Dragon NaturallySpeaking 


10.5 Human Testing 


The most thorough approach to ensure web accessibility is to test a website 
with persons with various disabilities to learn what areas are difficult for them 
to access. As this testing method requires more time and resources, it is best 
to first undertake the above four types of testing methods to rectify as many 
web accessibility issues as possible, and then use human testing at later 
stages of a project to uncover more subtle issues. 


Some organisations supporting persons with disabilities can help by 
providing free or affordable human testing services. These 
organisations include Direction Association for the Handicapped, 
Hong Kong Blind Union, Hong Kong Sign Language Association, the 
Hong Kong Society for the Blind and Retina Hong Kong. Website 
owners may contact these organisations for assistance. 
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11. Web Accessibility Related Resources 


Web Content Accessibility Guidelines version 2.0 (WCAG 2.0) 
https://www.w3.org/TR/WCAG20/ 


Web Content Accessibility Guidelines version 2.1 (WCAG 2.1) 
https://www.w3.org/TR/WCAG21/ 


Quick reference to WCAG 2 requirements and techniques 
https://www.w3.org/WAI/WCAG21/quickref/ 


Understanding WCAG 2.1 
https://www.w3.org/WAI/WCAG21/Understanding/ 


Techniques and Failures for WCAG 2.1 
https://www.w3.org/WAI/WCAG21/Techniques/ 


PDF Techniques for WCAG 2.1 
https://www.w3.org/WAI/WCAG21/Techniques/# pdf 


Web Accessibility Evaluation Tools List 
https://www.w3.org/WAI/ER/tools/ 


Web Accessibility Initiative (WAT) 
https://www.w3.org/WAI/ 


The Hong Kong Disability Discrimination Ordinance 
https://www.elegislation.gov.hk/hk/cap487 


The Hong Kong Equal Opportunities Commission 
https://www.eoc.org.hk 
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12. Glossary 


Term Description 


Abbreviation 


Shortened form of a word, phrase or name. 


Acronym 


An abbreviation made from the initial letters of a name 
or phrase that contains several words. Many acronyms 
can be pronounced as words. Defined differently in 
different languages. 


“alt” tag 


An attribute of an HTML tag that provides information 
about an element in text form 


Assistive 
technology 


A range of hardware devices such as modified keyboards 
and software such as screen readers that assist and 
enable persons with disabilities to use devices such as 
computers more effectively. 


Audio 
description 


Audio narration that is added to the soundtrack to 
explain important details that cannot be understood from 
the main soundtrack alone. During pauses in the track, 
audio descriptions of video provide information about 
actions, characters, scene changes and on-screen text 
for people who are visually impaired. 


Breadcrumb 


A trail of links most often found at the top of a piece of 
content within a webpage. The trail of links shows the 
location of the page within the website and gives a 
means for the user to link to pages above it. 


Browser 


Any software that retrieves and renders Web content for 
users. 


Captcha 


A type of technology aimed at checking whether the 
submission of a form is being done by a person ora 
computer. These usually involve entering some sort of 
distorted but still legible text or number displayed on the 
screen. 


Captions 


Synchronised transcripts of dialogue and important 
sound effects. Captions provide access for persons with 
hearing impairments. 


sheet - CSS 


Cascading style 


A way to define the style of a webpage, separate to the 
content through an external file. 


Changes of 
context 


A change in the browser window, or focus off a particular 
item; or even a change of content that changes the 
meaning of what was previously being viewed. 


It should be noted that a change in content is not always 
a change of context. Small changes in content, such as 
an expanding outline do not change the context. 
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Term Description 


Code 


The language used to instruct computer software and 
hardware to perform certain functions 


Extended audio 
descriptions 


Audio descriptions that are added to an audio/visual 
presentation by pausing the video so that there is time 
to add an additional description of what is going on, or 
what just took place. This technique is only used when 
the message in the video would be lost without the 
additional audio description. 


Functionality 


Flash A proprietary multimedia platform owned by Adobe 
Systems, used to add animation, video and interactivity 
to webpages. 

Function / Perform or is able to perform one or more actions in 


response to user input. 


HTML 


Hypertext Mark-up Language (HTML) is the “language” 
used to produce websites. 


Live audio-only 


A live presentation that contains only audio (no video 
and no interaction) 


Masthead 


The portion at the top of most webpages. The term 
comes from the masthead of a newspaper which refers 
to the brand and name of a newspaper displayed at the 
top of the front page. On a webpage the masthead 
generally includes the logo and main navigation of the 
website. 


Parsing 


Parsing is the process a web browser goes through to 
display a webpage. The browser analyses the code and 
then displays the webpage accordingly. If the code is not 
correct, the browser may not display the webpage 
correctly. Screen readers also have to parse code and 
may not read a webpage correctly if the code is not 
correct. 


Session 


When a person visits a website, the server acknowledges 
that someone is using the website and assigns the 
persona period of time or session. In this way a website 
can keep track of stored items such as shopping carts. If 
a person stays idle on a website for too long - generally 
30 minutes - the session will expire and the website will 
consider the person as a new visitor. 
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Appendix A: WCAG 2.1 Success Criteria — Level AAA 


A.1 WCAG 2.1 Success Criterion 1.2.6 — Sign Language 
(Prerecorded) 


Sign language is a method universally used by people beset with hearing 
impairment to access audio content. This provides the ability to reflect 
emotion, intonation and other audio information that may be limited when 
using captions. 


Before Rectification 


Captions which describe events in video 


eee. 


Simply having the video with a transcript or captions may not be enough for 
all users. 


After Rectification 


A more reliable method is to translate this information through sign language 
as is seen in the image above. 


WCAG 2.1 Reference: 


https://www.w3.org/WAI/WCAG21/Understanding/sign-language- 
prerecorded 
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A.2WCAG 2.1 Success Criterion 1.2.7 — Extended Audio 
Description (Prerecorded) 


If the content of a video is complex, the audio within the video may not 
effectively explain what is taking place in the visual. Some visually impaired 
persons listening to the audio will miss out on important content. To rectify 
this, provide an extended audio description which describes in detail what is 
taking place in the visual. Often in these cases the visual may need to pause 
while the audio description plays. 


An extended audio description may state things like "The person is now doing 
X in the video. Now the person is doing Y." 


Before Rectification 


In the example above, there is a risk that a user has not enough time to 
understand all the information before the video moves onto the next point 
because they cannot see the visual. 


After Rectification 


Paused for audio description 


This example shows how the system can handle this by temporarily pausing 
the video and providing audio to explain the situation. 


WCAG 2.1 Reference: 


https://www.w3.org/WAI/WCAG21/Understanding/extended-audio- 
description-prerecorded 
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A.3WCAG 2.1 Success Criterion 1.2.8 — Media Alternative 
(Prerecorded) 


This success criterion is meant to target at users with impaired hearing and 
vision. This “alternative” is not like a caption or a subtitle. Instead, full 
descriptions are provided for all visual information, including visual context, 
actions and expressions of actors, and any other visual materials. In addition, 
non-speech sounds (laughter, off-screen voices, etc.) are described, and 
transcripts of all dialogues are included. The media alternative is generally 
provided in text so it can be read using assistive technologies. 


Before Rectification 


Learning About Accessibility 


| Captions which describe events in video | 


When video content is displayed as above, a visually impaired person will 
only hear the audio and a hearing impaired person will only see the pictures. 


After Rectification 


Learning About Accessibility 


Text Transoript and Description for the “Learniig ADout Accessibilty” video 


To improve accessibility, a text version is added. However, this text version 
is more than a transcript of the audio. It also describes what is taking place 
within the video. 


WCAG 2.1 Reference: 


https://www.w3.org/WAI/WCAG21/Understanding/media-alternative- 
prerecorded 
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A.4WCAG 2.1 Success Criterion 1.2.9 — Audio-only (Live) 


For live audio, offer an alternative that contains equivalent information. For 
example, make speech notes available if a speech is being delivered. 


Before Rectification 


Presentation on Accessibility 


This live presentation is not accessible to people beset with hearing 
impairment. 


After Rectification 


Presentation on Accessibility 


The image above shows that a simple link directing users to the speech notes 
means that all users can access this content. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/audio-only-live 
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A.5WCAG 2.1 Success Criterion 1.3.6 - Identify Purpose 


The purpose of user interface components, icons and certain sections can be 
identified by user agents. For example, Accessible Rich Internet Application 
(ARIA) landmarks should be used to identify regions of a page, so that 
assistive technologies can be used to make the content more 
understandable. 


Before Rectification 


Web/Mobile App at Ea ET 


Making Digital Content Available For ALL 


Background 


The web is a predominant channel for disseminating information and 
providing services to the public, Its usefulness will be greatly enhanced if 
the contents are accessible by the widest possible audience, including 


persons with disabilities 


Without setting the ARIA landmark roles, assistive technologies cannot easily 
recognise different regions of the webpage to provide customisation for the 
user. 


After Rectification 


ple="navigation” |) 


role=“banner” 


role=“main” 


The ARIA landmark roles are assigned to identify different regions of the 
page. Assistive technologies can help the user by adding icons or changing 
the styles of individual webpage components. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/identify-purpose.html 
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A.6WCAG 2.1 Success Criterion 1.4.6 — Contrast (Enhanced) 


Previously it was mentioned that having a contrast ratio of 4.5:1 is sufficient. 
This is the case for Level AA. Level AAA increases this ratio to 7.1:1 by using 
darker text on a lighter background or vice versa. 


Before Rectification 


Brightness Difference: (>= 125 115.532 


Colour Difference: (>= 500) 371 


WCAG 2 AA Compliant (18pt+) YES 
WCAG 2 AAA Compliant NO 
WCAG 2 AAA Compliant (18pt+ YES 


The text colour and background indicated in the contrast checker above do 
not comply with Level AAA. 


After Rectification 


Brightness Difference (>= 125) 133.67£ 
Colour Difference: (>= 500) 374 


Are colours compliant? 


Contrast Ratio 


WCAG 2 AA Compliant (18pt+) YES 
WCAG 2 AAA Compliant YES 
WCAG 2 AAA Compliant (18pt+) YES 


This text and background colour combination complies with Level AAA with 
the use of the contrast ratio above. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/contrast-enhanced 
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A.7WCAG 2.1 Success Criterion 1.4.7 — Low or No Background 
Audio 


Ideally, do not place background sounds in audio clips. If this cannot be 
avoided, provide a clearly labelled function to enable the user to turn the 
audio off and ensure the foreground sound is approximately four times as 
loud as the background sound. 


Before Rectification 


The background audio has a high chance of overpowering the actual dialogue. 
This becomes an issue for persons with hearing impairments. 


After Rectification 


An effort should be made to reduce the background sound as much as 
possible. At the bare minimum, make sure that if a background sound does 
exist, it is four times as quiet as the foreground sound/dialogue. 


WCAG 2.1 Reference: 


https://www.w3.org/WAI/WCAG21/Understanding/low-or-no- 
background-audio 


Version 1.8 Page 84 


Web Accessibility Handbook Appendix A: WCAG 2.1 Success Criteria 
— Level AAA 


A.8WCAG 2.1 Success Criterion 1.4.8 — Visual Presentation 


When there is a block of text, ensure the user can select the foreground and 
background colours. Besides, ensure the text is not “fully justified” and is 
less than 80 characters long. In addition, ensure there is at least a space 
and a half between each line and that the space between each paragraph is 
1.5 times larger than the space between each line. 


Before Rectification 


This paragraph of text is justified. The width is longer than 80 characters and, the line spacing 
is not space-and-a-half (it is single spacing)....This paragraph of text is justified. The width is 


longer than 80 characters and, the line spacing is not space-and-a-half (it is single spacing). 


The paragraph in the image above is not easily accessible as it does not meet 
the criteria mentioned. 


After Rectification 


This paragraph of text is aligned to the left. The width is less than 
80 characters and, the line spacing is space-and-a-half .... This 
paragraph of text is aligned to the left. The width is less than 80 


characters and, the line spacing is space-and-a-half. 


The second image shows how to make a paragraph accessible. This helps 
many users who have learning difficulties as there is enough space between 
each line and also the space is even. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/visual-presentation 
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A.9WCAG 2.1 Success Criterion 1.4.9 — Images of Text (No 
Exception) 


To achieve the highest accessibility rating, do not use text in images unless 
it is purely decorative, or the text as an image is central to the idea being 
communicated. 


Before Rectification 


ae 
SILS A LJ ES + 


The heading of the webpage above is an image and would not comply with 
Level AAA. 


After Rectification 


eot 
4) > 17 LJ RS + 


Calligraphy Website 
l (, CE V 


L 


Here the image has been replaced with text and now complies with Level 
AAA. 


WCAG 2.1 Reference: 


https://www.w3.org/WAI/WCAG21/Understanding/images-of-text-no- 
exception 
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A.10 WCAG 2.1 Success Criterion 2.1.3 — Keyboard (No 
Exception) 


With no exception, all content must be operable from a keyboard. 


Before Rectification 


el 
a> Chaxs + Bo " 


Services Support FAQ 


Home About Contact 


Gallery 


Create Drawing Here 
USE YOUR MOUSE TO CREATE 
THE DRAWING 


In this situation the system only allows a user to use his/her “mouse” to 
create the drawing. This is not accessible to persons with restriction in body 


movement who cannot use a mouse. 
After Rectification 


2S 
Bs) > O LJ kJ + E à 


AAA 


Contact Services Support FAQ 


Home | About 


Gallery 


Create Drawing Here.. 
Instructions - How to create a drawing using 
your keyboard: 


Press the space bar and the up or down arrows to create a curve 


from left to right. 


In this situation the system allows the user to create a picture using the 
keyboard and also provides instructions on how to achieve this. This is 
helpful for persons with restriction in body movement. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/keyboard-no- 


exception 
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A.11 WCAG 2.1 Success Criterion 2.2.3 — No Timing 


Design content such that timing is not an essential part of the event or 


activity. 


Before Rectification 


OOS m 


Home About Contact Services Support 


AAA 


Online Exam 


Question 1: Who was the first man in space? 
a) Yuri Gagarin 

b)  AlanB. Shepard Jr. 
c) Neil Armstrong 


Time remaining 
2:07 


After Rectification 


crore es 


Home About Contact Services Support 


AAA 


Online Exam 


Question 1: Who was the first manin space? 
a) Yuri Gagarin 

b) = Alan B. Shepard Jr. 

c) Neil Armstrong 


It is always advisable that no “time limit” is placed on a webpage. 


WCAG 2.1 Reference: 


https://www.w3.org/WAI/WCAG21/Understanding/no-timing 
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A.12 WCAG 2.1 Success Criterion 2.2.4 — Interruptions 


Users must be provided with a function to turn off updates except in 
emergencies. 


In this way, persons with attention deficit disorders can focus on the content 
without distraction. In addition, people using screen readers will not have 
content updated while they are listening, thereby preventing confusion. 


Before Rectification 


If this promotion is an auto-rotating element, a user who has learning 
disabilities or low vision may not be able to read all the content before it 
automatically rotates. 


After Rectification 


The button allows a user to pause the rotation if required. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/interruptions 
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A.13 WCAG 2.1 Success Criterion 2.2.5 — Re-authenticating 


If a user is logged into a system, and his/her “session expires”, he/she must 
be able to log in again without losing any of his/her previously entered data. 


Before Rectification 


Contact Details 


Fen nome E 


The example above shows a scenario where a user will lose his/her data, as 
the system has not remembered the user’s details at step 4. 


After Rectification 


O B M 


The correct technique is to ensure after the user logs in again, the data 
entered is not lost. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/re-authenticating 
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A.14 WCAG 2.1 Success Criterion 2.2.6 -— Timeouts 


Users should be informed about the duration of inactivity which will cause 
the page to time out and result in data loss, unless the data is preserved for 
more than 20 hours when the user does not take any actions. 


Note: If the transaction involves collection of personal data, please ensure 
the handling and protection of personal data complies with the Personal Data 
(Privacy) Ordinance. For more information about the Personal Data (Privacy) 
Ordinance, please refer to the following link: 


https://www.pcpd.org.hk/english/data_privacy_law/ordinance_at_a_Glance 
/ordinance.html 


Before Rectification 


Users are not warned of the 
duration of inactivity that could 
cause a timeout and data loss. 


Order Detail g ; After the page is idled for a certain 
Nar period of time, the application 
a Transaction Timeout prompts timeout and all the input 


sorry but your request longer than expected and | data a re lost 
$ 


ade we couldn't process your transaction, Please try again 


4 
Submit" Cancel 


After Rectification 


A message is clearly shown at 
the top of the page indicating 
that inactivity for more than 
an hour will trigger the 
timeout process. 


Name: 


Gender : 
Mobile 
Address : 


Submit Cancel 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/timeouts 


Version 1.8 Page 91 


Web Accessibility Handbook Appendix A: WCAG 2.1 Success Criteria 
— Level AAA 


A.15 WCAG 2.1 Success Criterion 2.3.2 — Three Flashes 


Ensure there is nothing on a website that “flashes” for more than three times 
per second irrespective of its size. Otherwise, this may cause problems for 
people who suffer from epilepsy. 


Before Rectification 


eOr 


Ls i (LIES & aS 


In this example, the traffic light image is flashing too fast and is large in size. 
This can cause seizures. 


After Rectification 


I~ 
l<iPiGiALXE+ Q 


Home About Contact Services Support 


Using Green Man Crossings 


Green man crossings are pedestrian 
crossings with traffic lights to signal 
drivers to stop, and pedestrian lights 
to signal pedestrians when to cross. 


It is better to replace flashing content with static content that does not 
change. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/three-flashes 


Version 1.8 Page 92 


Web Accessibility Handbook Appendix A: WCAG 2.1 Success Criteria 
— Level AAA 


A.16 WCAG 2.1 Success Criterion 2.3.3 — Animation from 
Interactions 


Users should be allowed to disable the motion animation triggered by 
interaction, unless the animation is essential to the functionality or the 
information being conveyed. 


Before Rectification 


AMP aon 
Web MobilerApp ee 


Ccessibilityeampalsn 


Web MobilevApp 
AccessibilitwiCampaign 


E 


Animation on the top banner is triggered when users scroll down the 
webpage. However, the website does not allow users to disable the 
non-essential animation in the banner. Users with vestibular disorders 
(motion sickness) may feel sick when reading the web content. 


After Rectification 


Background 


A function is provided for users to disable all non-essential animations. 


WCAG 2.1 Reference: 


https://www.w3.org/WAI/WCAG21/Understanding/animation-from- 
interactions.html 
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A.17 WCAG 2.1 Success Criterion 2.4.8 — Location 


Provide a way for the users to determine their location within a website at 
all times. For example, use “breadcrumbs” so that users will be able to 
quickly determine where they are within a website. 


Before Rectification 


t up on 1 july 2004 to provide leadership for the 


on and communications technology (ICT) 


within and outside the Government 


In the example shown above, there is no way of knowing where you are 
within the website. For a user who is visually impaired, it is very easy to get 
disorientated whilst navigating a website. 


After Rectification 


oo 
Ble MOGs & mo È 


AAA 


ADOL Om 
About> Welcome Message 


Welcome Message 


Welcome to the homepage of the Office of the Government 
Chief Information Officer (OGC10) of the Government of the 
Hong Kong Special Administrative Region 

The OGCIO was set upon 1 July 2004 to provide leadership for 
the development of information and commumnicatons technology 
(ICT) within and outside the Government 


In this example, notice how a “breadcrumb” trail is included. This allows 
users to always know where they are within the website. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/location 
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A.18 WCAG 2.1 Success Criterion 2.4.9 — Link Purpose (Link 
Only) 


Make sure that the purpose of each link can be recognised from the link text 
alone. 


Before Rectification 


Customer Experience Testing 


Do they see it? 


Find out what your “real” 


_ customer experienceis >> M 


» 


The button “Find out more” only briefly describes the purpose of this link. 


After Rectification 


la r O AX + 


Customer Experience Testing 


= 


Do they see it? 


Find out what your “real” 


heata ah ae 
Customer Faperience Tasting 


This image shows a link button which clearly describes its purpose, i.e. “Find 
out more about Customer Experience Testing”, instead of just “Find out more” 
as shown in the “Before Rectification” image above. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-link-only 


Version 1.8 Page 95 


Web Accessibility Handbook Appendix A: WCAG 2.1 Success Criteria 
— Level AAA 


A.19 WCAG 2.1 Success Criterion 2.4.10 — Section Headings 


Use section headings such as titles, headings and subheadings, to break up 
content into smaller chunks. This helps users digest the content more easily, 
and makes it easier for all users to navigate quickly through the information. 


Before Rectification 


e._= 
aie KS LIES & Q 


Success Criterion 


To enable all people, including persons wilh Gsabiities, to live 
wxdependently and pariapate in all aspects of Ife, we should take 
every opportunity to make information accessible to all 

This Handbook is designed for senior executives and managers to 
deter understand the importance of web accessibility and show haw 
acan be successfully mnptemenied Some orpanisatons may 
consider then websiles to be “accessible” whon Ihe websites are 
easily tound by search engines 


The example above has a large piece of text. This could be difficult to read 
by some users who may have learning disabilities. Besides, for people using 
screen readers, this is a long piece of text to read. 


After Rectification 


AAA 


nmable all people, including persons wih dsabilfes, to live 
independen@y and parhapate in af aspects af life we should take 
every opportunity to make information accessible to all 


Handbook 


This Handbook is designed for senior execulives and managers to 
better understand the importance of web accessibuity and show 
how itcan be successfully mplemented. Some orgarusabons may 
consader thee websites to be “socessbio when the websites are 
easily found by search engines 


By breaking the information into sections, it would be easier to understand. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/section-headings 
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A.20 WCAG 2.1 Success Criterion 2.5.5 — Target Size 


The sizes of target (e.g. button) are at least 44 by 44 Cascading Style Sheets 
(CSS) pixels, except when: 


Equivalent: The target is available through an equivalent link or control 
on the same page that is at least 44 by 44 CSS pixels; 


Inline: The target is in a sentence or block of text; 


User Agent Control: The size of the target is determined by the user 
agent and is not modified by the author; 


Essential: A particular presentation of the target is essential to the 
information being conveyed. 


Before Rectification 


Buttons are too small and difficult 
to tap. 


Subscribe to Newsletter 


Email 


n 


he 


After Rectification 


The size of buttons is larger than 44 
by 44 CSS pixels, so that users can 
Subscribe to Newsletter tap the buttons easily. 


Email: 


Sut Cancel 


A he 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/target-size.html 
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A.21 WCAG 2.1 Success Criterion 2.5.6 — Concurrent Input 
Mechanisms 


Websites should not restrict the use of input modalities (e.g. keyboard, 
mouse, touchscreen, voice input) available on a platform, unless the 
restriction is essential, or is required to ensure the security of the content, 
or to respect user settings. 


Before Rectification 


Web Mail 


trams Aen ~~. « G Manger AD 
From : | Judy Che 
To: 
Subject : S 


The webpage only accepts input by keyboard. 


After Rectification 


Web Mail 
From : judy Che 
To: 

Subject : 


The webpage accepts more than one kind of input mechanism, including 
keyboard, mouse and touchscreen. Users are allowed to switch between 
input mechanisms when necessary. 


WCAG 2.1 Reference: 


https://www.w3.org/WAI/WCAG21/Understanding/concurrent-input- 
mechanisms.html 


Version 1.8 Page 98 


Web Accessibility Handbook Appendix A: WCAG 2.1 Success Criteria 
— Level AAA 
A.22 WCAG 2.1 Success Criterion 3.1.3 — Unusual Words 


If words or phrases are used in an unusual or restricted way, including 
unusual expressions or jargons, ensure there is a way for users to identify 
the corresponding definitions. One example of how this can be done is to 
make sure the expanded version of an acronym is explained for screen 
readers. 


Before Rectification 


| eee 
<P (9 Lt & Bo ji 


AAA 


Handbook 


This Handbook is designed forsenior executives and managers 
to better understand the importance of web accessibility and 
show how it can be successfully implemented. Some 
organisations may consider their websites to be “accessible” 
when the websites are easily found by search engines 


In the example above, users could not identify the definition of the term 
“web accessibility”. 


After Rectification 


AAA 


Handbook 


This Handbook is designed for seniorexecutives and managers 


show how it can be successfully implemented. Some 
organisations may consider their websites to be “accessible” 
when the websites are easily found by search engines 


In this example, some words are linked to a glossary. This is a good method 
to ensure all users understand the unusual terms. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/unusual-words 
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A.23 WCAG 2.1 Success Criterion 3.1.4 — Abbreviations 


Wherever abbreviations are used, provide a way for the user to understand 
what these abbreviations stand for and their meaning. What may seem 
obvious to one person may be meaningless to another. 


Before Rectification 


We will commence a pilot project on 
| UCCto enable users to experience 
feaktime communication and adopt 
collahoration tools in their business 
operations 
\ 


HTML code: 

We will commence a pilot project on 
UCC to enable users to experience 
real-time communication and adopt 
collaboration toolsin their business 
operations. 


The acronym “UCC” should not be coded like the example displayed above. 
A screen reader will try to read the letters U-C-C like a word which may be 
difficult to understand. 


After Rectification 


We will commence a pilot project on 
UCC to enable users to experience 
teatime communication and adopt 
collahoration tools in their business 
operations 


HTML code: 

We will commence a pilot project on 
<abbr title="Unified Communicationsand 
Collaboration “>UCC</abbr>to enable 
users to experience real-time 
communication and adopt collaboration 
toolsin their business operations. 


When an acronym is used, ensure the code is written as shown above. In 
this way, screen readers will not read the letters “UCC”, it will read the full 
version of the abbreviation, that is “Unified Communications and 
Collaboration”. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/abbreviations 
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A.24 WCAG 2.1 Success Criterion 3.1.5 — Reading Level 


Make text simple and easy to understand. For example, use short and 
common words in sentences. If possible, provide a summary for the content. 
This will help those users who may have learning difficulties such as dyslexia. 


Before Rectification 


vd you", itis obowt whether all people, wrespective of age, rec 


education or disability can access to Information In websites 


Persons with cdhusbiiitios, you are making your website more user-—friendy mesimising 


your custorwer bese and showing that you ate an orgecdiwtion tut cares. 


The above example shows some content with complexity. 


After Rectification 


AAA 


Web Accessibility Information 


oka desigred forsenor executives and managers to Dette 


we d tha mportance of web accesHtibty and show how it can be 
wurteuituth inple rented 
Toenadie at peop, ncuding persons with deaheities, to lve 


ndependemth and partiopate inai aspects of ie 


wnr eee CLIT Peers and man 


f web screwvtsitty and thow how it can be 


Wherever possible, try to make all content as simple as possible with minimal 
complexity. If possible, use less words and images to make reading easier, 
just like the example here. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/reading-level 
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A.25 WCAG 2.1 Success Criterion 3.1.6 — Pronunciation 


If there are words having different meanings when using different 
pronunciation, provide a clear explanation of the pronunciation. 


In the example below, the word “minute” may mean either “The button was 
so minute I could not see it.” (meaning “small”) or “I need a minute to think 
about it.” (meaning “60 seconds”). If such instances arise, ensure the 
meaning is clear from the context, or provide additional information that 
shows which pronunciation should be used so as to avoid ambiguity. 


Before Rectification 


Services Support FAO 


There could be some confusion over which meanings of the word “minute” is 
referred to, as there is no context provided. 


After Rectification 


| ee. 
4\PaCAAEXE + 


AAA 


Support FAQ 


handling 


* Minute design for easy 


* Lead casing for durability 


The example above shows how the content can be expanded to ensure there 
is no confusion. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/pronunciation 
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A.26 WCAG 2.1 Success Criterion 3.2.5 — Change on Request 


Items such as slideshows may automatically change context. In this case, 
ensure functions are available for users to control this automated change. 


Before Rectification 


By edopting relevent quctelines when cesigneng wetnites to cater for the neach f perus arth 


GiratrilBes, yuu are making your website move uut-friendly, macortsing your custome kaw aml 
honing that you ere an organstation tat t 


The example above shows a webpage having live updates of news items. 
Persons with vision impairments or specific learning difficulties may not have 


enough time to read all the news items before the automatic update with the 
latest news items. 


After Rectification 


AAA 
Live News Updates 
September 08, 12:07:26 . This Handbook hi Gowgned for senior axecutl 
better understand the Importonce of web eocessibitity ar 


tmplemected, Some organi 
websites are easthy found by ciple of web sccespibility ts 


not about whether people “cam te about whether all people. irrespective of age, rece 


edutationar deability. can è 


By adopeng tel 


t Guidelines when designing wrènites tr cater forthe needs cf pervons weth 
dsabilities you are makin 


teite more wser-triendly, marimising your customer hese and 


om that cares 


News will update in 00:29:01 Sa 


shoving that you are em or 


In this example, users who have difficulties in reading the news items within 


the time limit are provided with the option to request an update or pause the 
update. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/change-on-request 
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A.27 WCAG 2.1 Success Criterion 3.3.5 — Help 


Make sure users can always access the help functions which specifically 
address what they are trying to do. They should not be expected to have to 
wade through webpages of help text. 


Before Rectification 


ROO raay 
e PERCE AIXE + E . 
AAA 
Home About Contact Services Support FAQ 
Job Number Search 


Users could have difficulties in looking for “Job Number” without a specific 
help function. 


After Rectification 


e202 
E0000 fa bs 
AAA 
Home | About Contact Services Support FAQ 


Job Number Search 


— 
Job number: ay (Where dol find this?) 


It is important to have help functions that specifically relate to the content 
the users are currently viewing. The above example shows how this can be 
achieved. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/help 
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A.28 WCAG 2.1 Success Criterion 3.3.6 — Error Prevention (All) 


Error prevention provides safeguards against errors that are made by users. 
Providing users with functions to review and correct information allow users 
to detect mistakes before making submissions. 


Before Rectification 


Step 3 of 3; Registration for Newsletter 


Fest name | h 


Last Name | mith 


| 

—— fi 

Addres: | 123 anne Avenue 
| 


eres 


In this screen indicating the last step of a transaction, users are forced to 
submit their details without a “confirmation” step. 


After Rectification 


qo a 
<» C ALX E i ate Oe tu) aS Ì à 
AAA AAA 
Step 3 of 4: Registration for Newsletter Step 4 of 4: Confirm Registration 
Fest neme [ih ~ ~ =a Fort same << ~ — ] 
Last Name | jm Last Name ‘Smt | 
Address | 125 Plenan Avere i Address 123 Plemart Aver | 
| 
| 
Subure [Edgel Suburt x | 


] „vihe 
Es l continm netni D 


It is better to allow users to first confirm the detailed information, and 


provide them with an option to change any of the details before making the 
final submission. 


WCAG 2.1 Reference: 
https://www.w3.org/WAI/WCAG21/Understanding/error-prevention-all 
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Appendix B: WCAG 2.1 Criteria Checklist for 
Developers 


How to Use this Checklist 


Begin by following the steps below for Level A compliance, then repeat the 
steps for Level AA - and if necessary repeat again for Level AAA. Following 
this checklist will enable websites to be tested in the most efficient way. 


1. Review each of the criteria and “check off” all the success criteria 
that DO NOT APPLY to the website, using the N/A column. 


e For example, if a website does not have any audio or video content, 
then criterion 1.2.1 can be marked N/A and the Visual Review and 
Assistive Technology (AT) Test can be skipped. 


e Other items marked as skipped can be ignored for that test as it is 
not possible to determine compliance with that test. 


Level A Success Criteria Code Scan Visual Review AT Tests 


1.2.1 Audio-only and Video-only a | T Skip ala 


2. Scan website with a code scanning tool focusing on each of the items 
in the Code Scan column. 


e Note that code scan tools often report items that may not require 
fixing. Web developers should investigate each item found to 
determine if it is in fact a real issue. 


3. Perform Visual Review by checking all items listed in the 
visual review column. 


4. Test using various Assistive Technology (AT) tools such as 
screen readers, screen magnifiers and voice controls. 


Level A Success Criteria Code Scan Visual Review AT Tests 


mx o | o | oY 
1.1.1 Non-text Content el N A 
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B.1 WCAG 2.1 Level A Checklist 


Level A Success Criteria Code Scan Visual Review AT Tests 
1.1.1 Non-text Content | | O O E 
1.2.1 Audio-only and Video-only (Prerecorded) | iz | Skip | | 
1.2.2 Captions (Prerecorded) | | Skip O ðO 
a ia or Media Alternative | Skip T o 
1.3.1 Info and Relationships | | O O O 
1.3.2 Meaningful Sequence (O| Skip O O 
1.3.3 Sensory Characteristics | a | Skip O O 
1.4.1 Use of Colour | | Skip O Skip 
1.4.2 Audio Control | oO | Skip ð ð 
2.1.1 Keyboard | | oO O 0O 
2.1.2 No Keyboard Trap | O | Skip O O 
2.1.4 Character Key Shortcuts* = | Skip O O 
2.2.1 Timing Adjustable | | Skip O O 
2.2.2 Pause, Stop, Hide a | skip go go 
2.3.1 Three Flashes or Below Threshold | | Skip O Skip 
2.4.1 Bypass Blocks | ia | Skip 0O ðO 
2.4.2 Page Titled | se o m 
2.4.3 Focus Order | | Skip ð ð 
2.4.4 Link Purpose (In Context) | E | Skip ðO ðO 
2.5.1 Pointer Gestures* | | Skip O Skip 
2.5.2 Pointer Cancellation* | ial | Skip ðO Skip 
2.5.3 Label in Name* O | o O 0O 
2.5.4 Motion Actuation* | | Skip O Skip 
3.1.1 Language of Page | u | O Skip Skip 
3.2.1 On Focus | O | Skip ð ð 
3.2.2 On Input | | Skip LJ ðO 
3.3.1 Error Identification | a | Skip O O 
3.3.2 Labels or Instructions | ai) Skip O O 
4.1.1 Parsing | | O Skip Skip 
4.1.2 Name, Role, Value | LES | LJ Skip Skip 


*Note: New success criteria in WCAG 2.1 
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B.2 WCAG 2.1 Level AA Checklist 


Level AA Success Criteria Code Scan Visual Review | AT Tests 
1.2.4 Captions (Live) Skip O O 
1.2.5 Audio Description (Prerecorded) ee Skip O O 
1.3.4 Orientation* O ðO Skip 
1.3.5 Identify Input Purpose* i i] O O Skip 
1.4.3 Contrast (Minimum) 7 E Skip ðO Skip 
1.4.4 Resize text Skip O Skip 
1.4.5 Images of Text E Skip O Skip 
1.4.10 Reflow* Skip O Skip 
1.4.11 Non-Text Contrast* a] Skip O Skip 
1.4.12 Text Spacing* E i| Skip ðO Skip 
1.4.13 Content on Hover or Focus* See Skip O Skip 
2.4.5 Multiple Ways Skip ðO Skip 
2.4.6 Headings and Labels K 7 Skip O Skip 
2.4.7 Focus Visible i Skip O Skip 
3.1.2 Language of Parts RER Skip Skip ðO 
3.2.3 Consistent Navigation Skip O O 
3.2.4 Consistent Identification (Mae) Skip | O 
3.3.3 Error Suggestion Taa Skip O O 
3.3.4 Error Prevention ja E i Skip O O 
4.1.3 Status Messages* Skip O O 


*Note: New success criteria in WCAG 2.1 
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B.3 WCAG 2.1 Level AAA Checklist 


Level AAA Success Criteria 


N/A Code Scan 


Visual Review | AT Tests 


1.2.6 Sign Language (Prerecorded) 


1.2.7 Extended Audio Description (Prerecorded) 


1.2.8 Media Alternative (Prerecorded) 


1.2.9 Audio-only (Live) 


1.3.6 Identify Purpose* 


1.4.6 Contrast (Enhanced) 


1.4.7 Low or No Background Audio 


1.4.8 Visual Presentation 


1.4.9 Images of Text (No Exception) 


2.1.3 Keyboard (No Exception) 


2.2.3 No Timing 


2.2.4 Interruptions 


2.2.5 Re-authenticating 


2.2.6 Timeouts* 


2.3.2 Three Flashes 


2.3.3 Animation from Interactions* 


2.4.8 Location 


2.4.9 Link Purpose (Link Only) 


2.4.10 Section Headings 


2.5.5 Target Size* 


2.5.6 Concurrent Input Mechanisms* 


3.1.3 Unusual Words 


3.1.4 Abbreviations 


3.1.5 Reading Level 


3.1.6 Pronunciation 


3.2.5 Change on Request 


3.3.5 Help 


3.3.6 Error Prevention (All) 


Skip oO Skip 

m Skip O 0O 
E Skip LJ O 
o Skip o 0 
u Skip 0 O 
o Skip o Skip 
o Skip O 0 
Skip o Skip 

Skip o Skip 

Skip o Skip 

o Skip oO Skip 
| Skip o Skip 
o Skip o Skip 
E Skip 0O Skip 
ig i Skip o Skip 
ji i O 0O Skip 
o Skip O O 
go Skip O O 
E O O O 
a Skip 0O Skip 
Skip o Skip 

| Skip O 0O 
o Skip Skip O 
o o o Skip 
m) Skip O O 
Skip O LJ 
Skip O O 

B Skip o o 


*Note: New success criteria in WCAG 2.1 
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